MERN Delete

Let's add a new table cell

App.js

<tbody>
  {holidays.map((holiday) => {
    return (
      <tr key={holiday._id}>
        <td> {holiday.name}</td>
        <td>X</td>
      </tr>
    );
  })}
</tbody>

Let's add a function called delete holiday. It will do two things, make a call to our api to delete the holiday and then update our view to reflect our data

const deleteHoliday = (id) => {
  fetch("/holidays/" + id, {
    method: "DELETE",
  }).then((response) => {
    setHolidays(holidays.filter((day) => day._id !== id));
  });
};

Now we'll add a click event to our new td

gotcha in order to pass an argument in our click event we have to wrap our function inside an anonymous function

<td onClick={() => deleteHoliday(holiday._id)}>X</td>;